<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '评价列表',
  },
}
</route>

<template>
  <view class="min-h-screen bg-[#f1f1f1]">
    <view class="px-4 py-4 flex flex-col">
      <wd-status-tip image="content" tip="暂无内容" v-if="newsList.length == 0" />
      <!-- 评价列表 -->
      <view
        class="bg-white rounded-lg shadow overflow-hidden p-2 mb-2"
        v-for="news in newsList"
        :key="news.id"
      >
        <view class="flex flex-row mt-2">
          <image
            :src="news.userImage"
            class="w-8 h-8 rounded-full mr-2 shadow"
            mode="scaleToFill"
          />
          <text class="text-xs">{{ news.userName }}</text>
        </view>

        <view class="font-medium text-gray-800 text-xs line-clamp-2 my-4">
          评价：{{ news.evaluationContent }}
        </view>
        <view class="grid grid-cols-3 gap-2 my-2">
          <image
            v-for="(image, imgIndex) in parseImageList(news)"
            :key="imgIndex"
            :src="image"
            :alt="`Image ${imgIndex}`"
            class="w-full h-20 object-cover rounded bg-slate-50"
          />
        </view>
        <view class="flex items-center justify-between mt-2 mb-2">
          <text class="flex-1 text-xs text-gray-500">
            用户评分：
            <!-- <text class="text-[#ff6a33]">{{ news.evaluationStar }}</text> -->
            <wd-rate v-model="news.evaluationStar" />
          </text>
          <text class="text-xs text-gray-500">{{ news.addTime }}</text>
        </view>
      </view>

      <wd-loadmore custom-class="loadmore" v-if="loading && !nomore" state="loading" />
      <wd-loadmore custom-class="loadmore" v-if="!nomore && !loading" state="finished" />
      <wd-loadmore custom-class="loadmore" v-if="nomore" state="finished" />
    </view>
  </view>
</template>

<script setup>
import { http } from '@/utils/http'

const productId = ref(null)
const newsList = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)

const loading = ref(false)
const nomore = ref(false)

const getData = async (id) => {
  if (nomore.value) return

  loading.value = true
  // 获取评论
  try {
    let resp = await http.get('/api/evaluate/list', {
      pid: id,
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    })
    if (resp.code == 200) {
      console.log('resp', resp)
      newsList.value = resp.data.list
      total.value = resp.data.total
    }
  } catch (error) {
    console.log('error', error)
  } finally {
    loading.value = false
  }
}

onLoad((option) => {
  productId.value = option.id
  getData(productId.value)
})

onReachBottom(() => {
  if (nomore.value) return

  if (total.value > newsList.value.length) {
    pageNum.value++
    getData(productId.value)
  } else {
    uni.showToast({
      title: '没有更多了',
      icon: 'none',
      mask: false,
    })

    nomore.value = true
  }
})

const parseImageList = (news) => {
  return news.evaluationImage.split(',')
}
</script>

<style lang="scss" scoped></style>
